<link rel="stylesheet" href="../public/all/css/jquery.marquee.min.css">
<script src="../public/all/js/jquery.marquee.min.js"></script>

<div class="userinfo">
    <div style="float: left; padding-left: 5px;">
        <img src="../public/all/images/phone/red-me.png" width="18px" />
        <span class="name">--</span>&nbsp;&nbsp;

        <img src="../public/all/images/phone/red-money.png" width="18px" />
        <span class="amount">0.00</span>
    </div>
    <div style="float: right;">
        <button class="charge">充值</button>
        <button class="take">提现</button>
    </div>
    <div class="clear"></div>
</div>
<div class="note">
    <ul id="marquee" class="marquee"><li></li></ul>
</div>

<!-- 游戏列表 -->
<ul class="am-avg-sm-2 game-list">
    <li>
        <div class="title">北京PK10</div>
        <div class="cd">00:00</div>
    </li>
</ul>

<style type="text/css">
    .userinfo {
        line-height: 36px;
        border-bottom: 1px solid #b8b8b8;
        color: #ff0100;
        font-weight: bold;
    }
    .userinfo button {
        background-color: #2cc0ce;
        line-height: 24px;
        color: #fff;
        border: 1px solid #000;
        border-radius: 3px;
        font-weight: normal;
        font-size: 16px;
        padding: 0px 10px 0px 10px;
        margin-right: 10px;
    }
    .note {
        background-color: #eeeeee;
        border-bottom: 1px solid #b8b8b8;
        padding-top: 2px;
        height: 36px;
        overflow: hidden;
    }
    #marquee {
        line-height: 30px;
        height: 30px;
        font-size: 16px;
    }
    #marquee .marquee-showing {
        height: 30px;
    }
    ul.marquee li {
        font-size: 16px !important;
    }

    .game-list li {
        text-align: center;
        border-right: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        height: 105px;
    }
    .game-list li .title {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        line-height: 50px;
    }
    .game-list li .cd {
        width: 80px;
        color: #139fac;
        border: 1px solid #139fac;
        border-radius: 3px;
        margin: auto;
        font-weight: bold;
        line-height: 30px;
    }
</style>

<script>
    $(".back2game").hide();
    $(".home").show();
    $(".home").click(function() {
        Util.jumpUrl({
            file: 'index.html'
        });
    });

    ME.cb = function() {
        drawUserInfo();
    };
    ME.query(function() {
        draw_game_menus();
        loopLottery();
        setInterval(function() {
            loopLottery();
        }, 1000);
    });

    function drawUserInfo() {
        if (context.user && context.user.user) {
            $(".userinfo .name").html((context.user.user.mobile || '游客'));
            $(".amount").html((context.user.balance/100).toFixed(2));
        }
    }
    drawUserInfo();

    // 获取游戏列表
    var menuOrders = {};
    function get_game_lists() {
        var list = ME.gameLists();
        var games = get_game_list();
        var r = [];
        for (var i in games) {
            var game = games[i];
            if (menuOrders[game] === undefined) continue;
            if (list[game]) 
                r.push({
                    game: game,
                    order: list[game],
                });
            else
                r.push({
                    game: game,
                    order: parseInt(i),
                });
        }
        r.sort(function(a, b) {
            var aorder = a.order, border = b.order;
            if (menuOrders[a.game] !== undefined) aorder = parseInt(menuOrders[a.game]);
            if (menuOrders[b.game] !== undefined) border = parseInt(menuOrders[b.game]);
            return aorder - border;
        });
        return r;
    }

    // 拉取服务器的游戏顺序配置
    Classify.queryExt("games", "order", true, {}, function(r) {
        menuOrders = {};
        for (var i in r) {
            if (r[i] == -1) continue;
            menuOrders[i] = r[i];
        }
        draw_game_menus();
    });

    // 绘制游戏列表
    function draw_game_menus() {
        var ul = $(".game-list");
        var list = get_game_lists();
        var menuTemplate = '<li value="__value__"><div class="title">__name__</div><div class="cd">--</div></li>';

        ul.empty();
        for (var i = 0; i < list.length; i++) {
            var item = menuTemplate.replace(/__value__/, list[i].game);
            item = item.replace(/__name__/, get_game_display_name(list[i].game));
            ul.append(item);
        }
        var arr = $(".game-list li");
        for (var i = 0; i < arr.length; i++) {
            $(arr[i]).click(function(e) {
                Util.jumpUrl({
                    file: 'main2.html',
                    game: $(e.currentTarget).attr("value")
                });
            });
        }
    }

    // 定期刷新封盘时间
    var currInfos = {};
    function drawCurrTime(type, r) {
        var issue = r.issue, open = r.open, end = r.end;
        var div = $("li[value='" + type + "'] .cd");
        if (!issue) {
            div.html("--");
            return;
        }
        currInfos[type] = r;

        var t = end/1000 - new Date().getTime()/1000;
        if (t >= 3600) {
            div.html(Math.floor(t/3600) + '小时');
            return;
        }
        if (t > 0) {
            var i1 = parseInt(t/60), i2 = Math.ceil(t % 60);
            i1 = i1 < 10 ? "0" + i1 : i1;
            i2 = i2 < 10 ? "0" + i2 : i2;
            div.html(i1 + ":" + i2);
            return;
        }
        
        div.html("封盘");
    }
    function refreshCurr(type) {
        CMD.lottery_next(type, function(r) {
            drawCurrTime(type, r);
        });
    }
    function loopLottery() {
        var games = get_game_list();
        for (var i in games) {
            if (!currInfos[games[i]]) {
                refreshCurr(games[i]);
                continue;
            }
            drawCurrTime(games[i], currInfos[games[i]]);
            if (currInfos[games[i]].open - new Date().getTime() <= 0) {
                refreshCurr(games[i]);
                continue;
            }
        }
    }

    // 公告
    Classify.queryExt("settings", "board", false, "", function(v) {
        $("#marquee li").html(v);
    });
    $(document).ready(function() {
        $("#marquee").marquee();
    });

    $("button.charge").click(function() {
        Util.jumpUrl({
            cmd: 'charge',
            back: encodeURIComponent(window.location.href),
        });
    });
    $("button.take").click(function() {
        Util.jumpUrl({
            cmd: 'charge',
            n: 'take',
            back: encodeURIComponent(window.location.href),
        });
    });
</script>